<template>
  <div class="wrapper">
    <div id="chart" class="chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PolarChart',
  props: {
    msg: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  watch: {
    msg: {
      deep: true,
      handler(newdata) {
        this.drawChart(newdata)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart(this.msg)
    })
  },
  methods: {
    drawChart(msg) {
      // 基于准备好的dom，初始化echarts实例
      const chart = echarts.init(document.getElementById('chart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function() {
        chart.resize()
      })
      // 绘制图表
      chart.setOption({
        title: {
          text: '大五人格'
        },
        radar: {
          indicator: (function() {
            // 模拟指示器
            const indictors = []
            const max = Math.max(...msg)
            const personality = ['开放性', '责任性', '外倾性', '宜人性', '神经质性']
            // 指示器和数据要对应
            for (var i = 0; i < 5; i++) {
              indictors.push({
                text: personality[i],
                max
              })
            }
            return indictors
          })()
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: msg,
                name: 'Allocated Budget',
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: 'rgba(255, 145, 124, 0.1)',
                      offset: 0
                    },
                    {
                      color: 'rgba(255, 145, 124, 0.9)',
                      offset: 1
                    }
                  ])
                },
                symbol: 'rect',
                symbolSize: 12,
                lineStyle: {
                  type: 'dashed'
                },
                label: {
                  show: true,
                  formatter: function(params) {
                    return params.value
                  }
                }

              }
            ]
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .chart {
    width: 100%;
    margin:0 auto;
    height: 600px;
    /* background: url(../../public/static/bg.png) no-repeat; 背景图设置*/
    background-size: 100% 100%;
  }
</style>
